<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Video Demo Using popcorn.js</title>
  <meta charset="UTF-8" />
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="../../popcorn.js"></script>
  <script src="../../modules/parser/popcorn.parser.js"></script>

  <script src="../../plugins/webpage/popcorn.webpage.js"></script>
  <script src="../../plugins/googlemap/popcorn.googlemap.js"></script>
  <script src="../../plugins/footnote/popcorn.footnote.js"></script>
  <script src="../../plugins/subtitle/popcorn.subtitle.js"></script>
  <script src="../../plugins/tagthisperson/popcorn.tagthisperson.js"></script>
  <script src="../../plugins/wikipedia/popcorn.wikipedia.js"></script>
  <script src="../../plugins/flickr/popcorn.flickr.js"></script>
  <script src="../../plugins/attribution/popcorn.attribution.js"></script>
  <script src="../../plugins/lastfm/popcorn.lastfm.js"></script>
  <script src="../../modules/timeline-sources/popcorn.timeline-sources.js"></script>
  <script src="popcorn.applyclass.js"></script>

  <script src="../../parsers/parserXML/popcorn.parserXML.js"></script>

  <link href="style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    $(document).ready(function () {
      //Show hide the contents
      $(".collapse").click(function () {
        $(this).next(".content").slideToggle("fast");
      });
      //Swap class names
      $(".collapse").toggle(function () {
        $(this).addClass("expand");
      }, function () {
        $(this).removeClass("expand");
      });
      $(".collapse").toggle(function () {
        $("span", this).text('Expand');
      }, function () {
        $("span", this).text('Collapse');
      });
      $('section').hover(function() {
          $(this).addClass('hover')
      }, function() {
          $(this).removeClass('hover')
      })
      setInterval(function() {
        $('section.hover').each(function() {
            if ($(this).attr('hoveron')) {
                if ($('video')[0].currentTime-$(this).attr('hoveron')>1) {
                    $(this).removeAttr('hoveron').removeClass('hover');
                }
            }
        })
      }, 500);

      $('.clickhere').click(function(){
        $('.popup').fadeIn();
        $('.pop-overlay').fadeIn()
      });

      $('.pop-overlay').click(function(){
        $('.pop-overlay').fadeOut();
        $('.popup').fadeOut();
      });

      $('.close_btn').click(function(){
        $('.pop-overlay').fadeOut();
        $('.popup').fadeOut();
      });

    });
  </script>
</head>

<body>
  <!-- Start First Container Div -->
  <div class="container-top">
    <!-- Start Second Container Div -->
    <div class="container-bot">
      <!-- Start Wrapper Div -->
      <div class="wrapper">
        <!-- Start Header -->
        <header id="global-header">
          <a href="http://www.drumbeat.org/" class="logo"><img src="images/drumbeat_logo.png" alt="drumbeat_logo" width="255" height="87" /></a>

          <!-- Start Login/Signup -->
          <!--nav id="login">
            <ul>
              <li><a href="#">log in</a></li>
              <li><a href="#">sign up</a></li>
            </ul>
          </nav-->
          <!-- End Login/Signup -->

          <!-- Start Primary Links -->
          <nav id="demo-info">
            <ul>
              <li><a href="#" onClick="javascript:void();" class="clickhere green"><img src="images/video_icon.png" alt="" width="18" height="14" />watch a video and learn more about this demo</a></li>
            </ul>
          </nav>
          <!-- End Primary Links -->

        </header>
        <!-- End Header -->
        <!-- Start Contents -->
        <div id="contents">
          <!-- Start Left Contents -->
          <div class="left-content">
            <!-- Start Video Div -->
            <div id="videoContainer" class="video-div">
              <video id="webmademovies" width="530" height="299" data-timeline-sources="xml/webMadeMovies.xml" controls loop>
                <source src="http://videos.mozilla.org/serv/webmademovies/wmmjuly6.ogv" type='video/ogg; codecs="theora, vorbis"'>
                <source src="http://videos.mozilla.org/serv/webmademovies/wmmjuly6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
              </video>
              <div id="overlaydiv" style="position:absolute;top:1px;left:1px"></div>
              <!-- Start Video Info -->
              <div class="video-info">
                <!-- Start Choose Language -->
                <div class="choose-language">
                  <h2>Choose your language</h2>
                  <select id="language">
                      <option value="zh">Chinese</option>
                      <option value="en" selected="selected">English</option>
                      <option value="fr">French</option>
                      <option value="de">German</option>
                      <option value="it">Italian</option>
                      <option value="ja">Japanese</option>
                      <option value="ko">Korean</option>
                      <option value="fa">Persian</option>
                      <option value="pl">Polish</option>
                      <option value="pt">Portuguese</option>
                      <option value="es">Spanish</option>
                  </select>
                  <div id="credit">
                      with help from
                      <br />
                      <a href="http://google.com/translate">Google Translate</a> and <a href="http://jquery.com">
                      jQuery</a><br />
                      <input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
                  </div>
                </div>
                <!-- End Choose Language -->

                <!-- Start Foot Notes -->
                <div class="foot-notes">
                  <h2>This video's footnotes</h2>
                  <p id="footnotediv"></p>
                </div>
                <!-- End Foot Notes -->
              </div>
              <!-- End Video Info -->
            </div>
            <!-- End Video Div -->

            <div>
              <section>
                <a href="#" class="collapse"><span>Collapse</span></a>
                <div id="iframes" class="content"><div class="overlay"></div><div class="inactive"></div></div>
              </section>
            </div>

            <h1>
              <span>In this video: <strong id="inthisvideo"></strong></span>
            </h1>

            <!-- Start Column B -->
            <div class="columna">
              <section>
                <h3><img src="images/logo_flickr.png" alt="Flickr Images" width="53" height="16" />
                                    <span>&nbsp;</span></h3>
                <a href="#" class="collapse"><span>Collapse</span></a>
                <div id="personalflickr" class="content"><div class="overlay"></div><div class="inactive"></div></div>
              </section>
            </div>
            <!-- End Column B -->
          </div>
          <!-- End Left Contents -->
          <!-- Start Right Contents -->
          <div class="right-content">
            <h1><span>Related to this video</span></h1>
            <!-- Start Column A -->
            <div class="columna">
              <section>
                <div id="container3" class="google-map-title">
                  <h4>Filmed in:</h4>
                  <span id="mapinfo"></span>
                </div>

                <div id="container2" class="google-map"></div>

              </section>
            </div>
            <!-- End Column A -->
            <!-- Start Column B -->
            <div class="columnb">
              <section>
                <h3><img src="images/logo_wiki.png" alt="Wikipedia" width="92" height="13" /></h3>
                <a href="#" class="collapse"><span>Collapse</span></a>
                <div class="content" id="wikidiv"><div class="overlay"></div><div class="inactive"></div></div>
              </section>
	          <section>
                <h3><img src="images/logo_lastfm.png" alt="Lastfm" width="80" height="24" /></h3>
                <a href="#" class="collapse"><span>Collapse</span></a>
                <div class="content" id="lastfmdiv"><div class="overlay"></div><div class="inactive"></div></div>
              </section>
            </div>
            <!-- End Column B -->
            <h1><span>This video's copyright information</span></h1>
            <section>
              <div id="container5"></div>
            </section>
          </div>
          <!-- End Right Contents -->
        </div>
        <!-- End Contents -->
        <footer>
          <div class="footer_drumbeat">
          <img src="images/footer_webmade.png" alt="footer_drumbeat" width="115" height="91" />
          <p>Web Made Movies is Mozilla's<br /> Open video lab<br />
          <a href="http://www.drumbeat.org/webmademovies">Learn More and find the source code for this demo<span>&raquo;</span></a>
          </p>
          </div>
          <div class="footer_drumbeat">
          <img src="images/footer_drumbeat.png" alt="footer_drumbeat" width="200" height="68" /><p>Innovation on the open web,<br />powered by everybody.</p>
          </div>
          <div class="copyright">Portions of this content are &copy;2010 by individual drumbeat.org contributors. Content available under a Creative Commons license.</div>
        </footer>
      </div>
      <!-- End Wrapper Div -->
    </div>
    <!-- End Second Container Div -->
  </div>
  <!-- End First Container Div -->

  <!-- Start Popup -->
  <div class="pop-overlay">
  </div>

  <div class="popup">
    <span class="close_btn">x</span>

    <div class="popup-content">
      <h1>Info about this page</h1>
      <p>This demo was created by Scott Downe, Anna Sobiepanek, Daniel Hodgin, Nick Cammarata, and Brett Gaylor as part of Web Made Movies. To download the source code and find out how you can contribute, click on the Web Made Movies logo at the bottom of this page.</p>

      <p>
        <strong>Are you having trouble getting this demo to play?</strong><br />
        This video will only play in modern browsers, such as Firefox 3.5+ or Safari 3+. Unfortunately, Internet Explorer does not currently support open video codecs, so the won't work in that browser.
      </p>
    </div>
  </div>
  <!-- End Popup -->
</body>
</html>
